<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>新闻管理系统</title>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
	<link rel="stylesheet" href="../static/css/news.css" th:href="@{/css/news.css}">

      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js" th:href="@{https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js}"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js" th:href="@{https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js}"></script>

	<link rel="icon" type="image/png" sizes="144x144" href="../static/images/1.ico" th:href="@{/images/1.ico}"/>
	<style type="text/css">
		.L_bg1{
			margin-top:50px;
		}
		.L_bg1 img{
			width:100%;
		}
		.bgwhite1{
			background-color:white;
			padding:15px 10px 0px;
			border-radius:10px;
			opacity:0.9;
		}
		.bgwhite2{
			background-color:white;
			padding:10px;
			border-radius:10px;
			opacity:0.9;
		}
		.L_bg2{
			margin-top:15px;
		}
		.list-group-item a{
			text-decoration:none;
		}
		.L_radius{
			border-radius:10px;
		}
		.bgblack3{
			background: #232328;
			padding:10px;
			border-radius:10px;
			opacity:0.9;
		}
		.bgblack3 div h4,h2{
			color:white;
		}
		.L_listtype span{
			color: #337ab7;
		}
		.L_listcomment span{
			color: #337ab7;
		}
		.L_righttitle span{
			color: #337ab7;
		}
	</style>
  </head>
  <body>
	<!--插入背景图片-->
	<div class="bg"></div>
	<div class="mask"></div>
	<!-- 导航-->
	<nav th:replace="_fragments :: menu(1)" ></nav>
	

	
	<!--中间白块-->
	<div class="container L_bg1 bgwhite1">
		<!--左边栏-->
		<div class="col-md-2 L_left">
			<div><span>[[${#dates.format(news.updateTime, 'yyyy-MM-dd')}]]</span></div>
			<div><span>新闻类型:</span><span th:text="${news.type.name}">娱乐</span></div>
			<div><span>上传会员:</span><span th:text="${news.user.nickname}">蔡老师</span></div>
		</div>
		
		
		<!--新闻部分-->
		<div class="col-md-8">
			<div class="News">
				<h2 th:text="${news.title}">白岩松：用提问靠近最真实的结论才是媒体该干的事</h2>
				<div>
				<p>
				【版权声明】本作品著作权归软件工程第8组新闻独家所有，授权深圳市腾讯计算机系统有限公司独家享有信息网络传播权，任何第三方未经授权，不得转载。
				</p>
				<p th:text="${news.content}"></p>

				</div>
			</div>
		</div>
	</div>

	<!--底部-->
	<footer th:replace="_fragments::footer"></footer>
	<button onclick="topFunction()" id="backtopBtn" class="btn btn-default" title="回顶部">返回顶部</button>

    <script src="../static/jquery/jquery.min.js" th:src="@{/jquery/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	
	<script>
		// 当网页向下滑动 20px 出现"返回顶部" 按钮
		window.onscroll = function() {scrollFunction()};
		 
		function scrollFunction() {console.log(121);
			if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
				document.getElementById("backtopBtn").style.display = "block";
			} else {
				document.getElementById("backtopBtn").style.display = "none";
			}
		}
		 
		// 点击按钮，返回顶部
		function topFunction() {
			document.body.scrollTop = 0;
			document.documentElement.scrollTop = 0;
		}
	</script>

  </body>
</html>